<template>
    <view class="profile-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">身体档案更新</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 基础信息 -->
            <view class="input-group">
                <text class="input-label">基础信息</text>
                <u-form :model="profileData" :rules="rules" ref="uForm">
                    <!-- 身高体重 -->
                    <view class="basic-stats">
                        <view class="stat-field">
                            <text>身高 (cm)</text>
                            <u-form-item prop="height">
                                <u-input v-model="profileData.height" type="number" placeholder="输入身高"></u-input>
                            </u-form-item>
                        </view>
                        <view class="stat-field">
                            <text>体重 (kg)</text>
                            <u-form-item prop="weight">
                                <u-input v-model="profileData.weight" type="number" placeholder="输入体重"></u-input>
                            </u-form-item>
                        </view>
                    </view>

                    <!-- BMI显示区域 -->
                    <view class="bmi-display" v-if="profileData.height && profileData.weight">
                        <text class="bmi-value">BMI: {{ calculatedBMI }}</text>
                        <text class="bmi-status" :style="{ color: bmiBgColor }">{{ bmiStatus }}</text>
                        <view class="bmi-progress">
                            <view class="bmi-marker" :style="{ left: bmiPosition + '%', backgroundColor: bmiBgColor }">
                            </view>
                            <view class="bmi-scale">
                                <text>偏瘦</text>
                                <text>正常</text>
                                <text>超重</text>
                                <text>肥胖</text>
                            </view>
                        </view>
                    </view>
                </u-form>
            </view>

            <!-- 身体围度 -->
            <view class="input-group">
                <text class="input-label">身体围度 (cm)</text>
                <view class="dimensions">
                    <view class="dimension-item">
                        <text>胸围</text>
                        <u-input v-model="profileData.chestCircumference" type="number" placeholder="胸围"></u-input>
                    </view>
                    <view class="dimension-item">
                        <text>腰围</text>
                        <u-input v-model="profileData.waistCircumference" type="number" placeholder="腰围"></u-input>
                    </view>
                    <view class="dimension-item">
                        <text>臀围</text>
                        <u-input v-model="profileData.hipCircumference" type="number" placeholder="臀围"></u-input>
                    </view>
                </view>
            </view>

            <!-- 体脂率 -->
            <view class="input-group">
                <text class="input-label">体脂率 (%)</text>
                <u-input v-model="profileData.bodyFatPercentage" type="number" placeholder="输入体脂率"></u-input>
                <view class="input-tips">
                    <text>健康范围：男性10-20%，女性18-28%</text>
                </view>
            </view>

            <!-- 基础代谢率 -->
            <view class="input-group">
                <text class="input-label">基础代谢率 (kcal)</text>
                <view class="bmr-section">
                    <u-input v-model="profileData.bmr" type="number" placeholder="输入基础代谢率"></u-input>
                    <u-button type="info" size="mini" @click="calculateBMR">自动计算</u-button>
                </view>
                <view class="input-tips">
                    <text>基础代谢率是指人体在安静状态下维持生命所需的最低能量</text>
                </view>
            </view>

            <!-- 健康目标 -->
            <view class="input-group">
                <text class="input-label">健康目标</text>
                <u-radio-group v-model="profileData.healthGoal">
                    <u-radio label="减脂减重" name="weightLoss"></u-radio>
                    <u-radio label="健康维持" name="maintain"></u-radio>
                    <u-radio label="增肌增重" name="muscleGain"></u-radio>
                </u-radio-group>
            </view>

            <!-- 目标体重 -->
            <view class="input-group">
                <text class="input-label">目标体重 (kg)</text>
                <u-input v-model="profileData.targetWeight" type="number" placeholder="输入目标体重"></u-input>
            </view>

            <!-- 更新日期 -->
            <view class="input-group">
                <text class="input-label">更新日期</text>
                <u-datetime-picker v-model="profileData.updateDate" mode="date"></u-datetime-picker>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存档案" :customStyle="{ backgroundColor: '#ff9600' }"
                @click="saveRecord"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            profileData: {
                height: '', // 身高(cm)
                weight: '', // 体重(kg)
                chestCircumference: '', // 胸围(cm)
                waistCircumference: '', // 腰围(cm)
                hipCircumference: '', // 臀围(cm)
                bodyFatPercentage: '', // 体脂率(%)
                bmr: '', // 基础代谢率(kcal)
                healthGoal: 'maintain', // 健康目标
                targetWeight: '', // 目标体重
                updateDate: new Date().toISOString() // 更新日期
            },
            // 表单验证规则
            rules: {
                height: [
                    { required: true, message: '请输入身高', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            return value >= 50 && value <= 250;
                        },
                        message: '身高应在50-250cm之间',
                        trigger: 'blur'
                    }
                ],
                weight: [
                    { required: true, message: '请输入体重', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            return value >= 20 && value <= 300;
                        },
                        message: '体重应在20-300kg之间',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    computed: {
        // 计算BMI
        calculatedBMI() {
            if (!this.profileData.height || !this.profileData.weight) return 0;
            const heightInMeter = this.profileData.height / 100;
            let bmi = (this.profileData.weight / (heightInMeter * heightInMeter)).toFixed(1);
            return bmi;
        },
        // BMI状态
        bmiStatus() {
            const bmi = parseFloat(this.calculatedBMI);
            if (bmi < 18.5) return '偏瘦';
            if (bmi < 24) return '正常';
            if (bmi < 28) return '超重';
            return '肥胖';
        },
        // BMI指示器位置
        bmiPosition() {
            const bmi = parseFloat(this.calculatedBMI);
            // 将BMI值映射到0-100的位置
            if (bmi < 15) return 0;
            if (bmi > 35) return 100;
            // 15-35映射到0-100
            return ((bmi - 15) / 20) * 100;
        },
        // BMI颜色
        bmiBgColor() {
            const bmi = parseFloat(this.calculatedBMI);
            if (bmi < 18.5) return '#1cb0f6'; // 蓝色 - 偏瘦
            if (bmi < 24) return '#58cc02'; // 绿色 - 正常
            if (bmi < 28) return '#ff9600'; // 橙色 - 超重
            return '#ff4b4b'; // 红色 - 肥胖
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        // 自动计算BMR (基础代谢率)
        calculateBMR() {
            if (!this.profileData.height || !this.profileData.weight) {
                uni.showToast({
                    title: '请先输入身高和体重',
                    icon: 'none'
                });
                return;
            }

            // 使用Harris-Benedict公式计算BMR
            // 这里假设用户是成年人，简化计算
            // 男性: BMR = 66 + (13.7 × 体重kg) + (5 × 身高cm) - (6.8 × 年龄)
            // 女性: BMR = 655 + (9.6 × 体重kg) + (1.8 × 身高cm) - (4.7 × 年龄)

            // 简化公式，假设是30岁成年人
            // 获取用户信息中的性别
            const gender = uni.getStorageSync('userGender') || 'male';
            const age = uni.getStorageSync('userAge') || 30;

            let bmr = 0;
            if (gender === 'male') {
                bmr = 66 + (13.7 * this.profileData.weight) + (5 * this.profileData.height) - (6.8 * age);
            } else {
                bmr = 655 + (9.6 * this.profileData.weight) + (1.8 * this.profileData.height) - (4.7 * age);
            }

            this.profileData.bmr = Math.round(bmr);

            uni.showToast({
                title: 'BMR已计算',
                icon: 'success'
            });
        },
        // 保存记录
        saveRecord() {
            // 验证表单
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    // 处理数据保存
                    console.log('保存身体档案数据:', this.profileData);

                    // TODO: 调用API保存数据

                    // 显示成功提示
                    uni.showToast({
                        title: '档案保存成功',
                        icon: 'success',
                        success: () => {
                            // 延迟返回
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        }
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss">
$duolingo-orange: #ff9600;
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-red: #ff4b4b;

.profile-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
    font-weight: bold;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.basic-stats {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    .stat-field {
        flex: 1;

        text {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 6rpx;
            display: block;
        }
    }
}

.bmi-display {
    margin-top: 30rpx;
    padding: 20rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;

    .bmi-value {
        font-size: 32rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
    }

    .bmi-status {
        font-size: 28rpx;
        margin-bottom: 16rpx;
        display: block;
    }

    .bmi-progress {
        height: 40rpx;
        background: linear-gradient(to right, #1cb0f6, #58cc02, #ff9600, #ff4b4b);
        border-radius: 20rpx;
        position: relative;
        margin-top: 20rpx;

        .bmi-marker {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            position: absolute;
            top: -10rpx;
            transform: translateX(-50%);
            border: 4rpx solid #fff;
            box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.3);
        }

        .bmi-scale {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;

            text {
                font-size: 22rpx;
                color: #666;
            }
        }
    }
}

.dimensions {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .dimension-item {
        flex: 1;
        min-width: 200rpx;

        text {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 6rpx;
            display: block;
        }
    }
}

.bmr-section {
    display: flex;
    align-items: center;
    gap: 20rpx;

    u-input {
        flex: 1;
    }
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>